<template>
  <div class="log-menu">
    <form>
      <ul class="log-menu-list">
        <li class="hint">
          <label id="hint"> {{ hintSentence }} </label>
        </li>
        <li class="log-out">
            <FunctionButtons :buttonId="buttonId" :buttonClass="buttonClass" :buttonName="buttonName"></FunctionButtons>
        </li>
      </ul>
    </form>
  </div>
</template>

<script>
import FunctionButtons from './Button.vue'

export default {
  name: 'LoginMenu',
  props: {
    hintSentence: {
      type: String,
      default: '若要注销，请点击以下按钮'
    },
    buttonClass: {
      type: String,
      default: 'log-out-button'
    },
    buttonId: {
      type: String,
      default: 'log-out-button'
    },
    buttonName: {
      type: String,
      default: '注销用户'
    }
  },
  components: {
    FunctionButtons
  }
}
</script>

<style scoped>
li {
  width: 100%;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
}
ul {
  list-style: none;
}
label {
  width: 100px;
  font-size: 20px;
  font-weight: 700;
}
#hint {
  width: 400px;
}
</style>
